<template>
  <div class="content">
<!--  职位详情   -->
    <div class="detail-content" v-loading="infoLoading">
      <div class="left-block">
        <div class="left-top-block">
          <div class="post-top">
            <div class="post-title">{{ info.jobTitle }}</div>
            <div class="post-pay">{{info.minSalary }}-{{info.maxSalary}}元</div>
          </div>
          <div class="site">{{ info.jobAddress }}</div>
          <div class="striping"></div>
          <div class="release-time">
            <span>发布时间：</span>
            <div class="time">{{ info.crtTimeText }}更新</div>
          </div>
          <div class="count">
            <div class="send-count">
              <span>投递: </span>
              <div class="counts">
                {{ info.deliveryCount }}
              </div>
            </div>
            <div class="browse-count">
              <span>浏览: </span>
              <div class="counts">
                {{ info.lookCount }}
              </div>
            </div>
          </div>
        </div>
        <div class="left-middle-block" >
          <div class="title">
            职位福利
          </div>
         <template v-if="info.welfareList.length>0">
           <div class="welfare-block" style="overflow-y: scroll;height: 165px">
             <div class="welfare-list" v-for="(item,index) in info.welfareList" :key="item.id">
               <div class="welfare">{{item.data}}</div>
             </div>
           </div>
         </template>
          <div class="text" v-else style="text-align: center;margin-top: 10px;">暂无</div>
        </div>
      </div>
      <div class="middle-top-block" v-if="jobDescriptionLength>300">
        <div class="title">
          职位描述
        </div>
        <div class="text" v-if="info.jobDescription" v-html="info.jobDescription" style="overflow-y: scroll;height: 450px"></div>
        <div class="text" v-else>暂无</div>
      </div>
      <div class="middle-top-block" v-else>
        <div class="title">
          职位描述
        </div>
        <div class="text" v-if="info.jobDescription" v-html="info.jobDescription"></div>
        <div class="text" v-else>暂无</div>
      </div>

      <div class="middle-block">
        <div class="left-bottom-block">
          <div class="title">
            联系人
          </div>
          <div class="people-content">
            <div class="default-avatar">
              <img :src="info.comRecruiters.user.faceUrl ? info.comRecruiters.user.faceUrl:'@/assets/Recruitment/defaultAvatar.jpg'" alt="">
              <div class="hr-info">{{ info.comRecruiters.comPosition }} {{info.comRecruiters.realName}}</div>
            </div>
            <el-popover
                placement="top-start"
                title="电话"
                width="200"
                trigger="click"
                :content="info.comRecruiters.user.userName?info.comRecruiters.user.userName + '':'暂无'">
              <el-button slot="reference">
                <div class="map">
                  <img src="@/./assets/Recruitment/./iphone.png" alt="">
                  <span>联系ta</span>
                </div></el-button>
            </el-popover>
          </div>
        </div>
        <div class="middle-bottom-block">
          <div class="title">
            工作地址
          </div>
          <div class="location">
            <div class="site">
              {{ info.jobAddress }}
            </div>
            <div class="map" @click="openMsg()">
              <img src="@/./assets/Supermarket/site.png" alt="">
              <span>地图</span>
            </div>
<!--            遮盖层-->
            <div v-if="isShow" style="
            width: 100%;height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;"
            >
              <div style="width: 100%;height: 100%;position:absolute;" @click="closeMsg()"></div>
              <div class="map1">
                <div class="title" style="display: flex;justify-content: space-between">工作地址
                  <div class="site" style="font-size: 20px;color: #000">
                    {{ info.jobAddress }}
                  </div>
                  <div class="img" @click="closeMsg()">
                    <img src="@/assets/Recruitment/close.png" alt="">
                  </div>
                </div>
                <div id="contain"></div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="right-block">
        <div class="title">公司信息</div>
        <div class="company-info">
          <img :src="info.comRecruiters.enterprise.logoUrl" alt="">
          <div class="company-scale">
            <div class="company-name">{{info.comRecruiters.enterprise.enterpriseName}}</div>
            <div class="scale">{{info.comRecruiters.enterprise.scaleName}}·{{info.comRecruiters.enterprise.enterpriseTypeText}}</div>
          </div>
        </div>

        <div class="brief-intro"  v-if="enterpriseIntroductionLength>300">
          <span class="small-title">简介：</span>
          <div class="text"  style="overflow-y: scroll;height: 450px" v-html="info.comRecruiters.enterprise.enterpriseIntroduction" v-if="info.comRecruiters.enterprise.enterpriseIntroduction"></div>
          <div class="text" v-else>暂无</div>
        </div>
        <div class="brief-intro" v-else>
          <span class="small-title">简介：</span>
          <div class="text" v-html="info.comRecruiters.enterprise.enterpriseIntroduction" v-if="info.comRecruiters.enterprise.enterpriseIntroduction"></div>
          <div class="text" v-else>暂无</div>
        </div>

        <div class="small-title">工商信息</div>
        <div class="right-bottom-block">

          <div class="property">注册资本：{{info.comRecruiters.enterprise.regcap}}万元</div>
          <div class="legal-person">
            法定代表⼈：{{info.comRecruiters.enterprise.legalPersonName}}
          </div>
          <div class="create-time">成⽴时间：{{info.comRecruiters.enterprise.estdate}}</div>
          <div class="more" @click="skip()">
            <span>点击查看详情</span>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDetailApi} from "@/api/home";

export default {
  name: "Detail",
  data(){
    return{
      infoLoading:false,
      isShow:false,
      searchFlag:'',
      info:{
        id:1,
        jobTitle: '',
        minSalary: '',
        maxSalary: '',
        jobAddress: '',
        crtTimeText:'',
        deliveryCount: 0,
        lookCount: 0,
        message: '',
        jobDescription:'',
        welfareList:[],
        comRecruiters:{
          comPosition:'',
          realName:'',
          user:{
            faceUrl:''
          },
          enterprise:{
            id:1,
            logoUrl:'',
            enterpriseName:'',
            scaleName:'',
            enterpriseTypeText:'',
            enterpriseIntroduction:'',
            legalPersonName:'',
            regcap:0,
            estdate:'',
            dateline:'',
            enterpriseLatitude:'',
            enterpriseLongitude:''
          }
        }
        },
    }
  },
  methods:{
    openMsg(){
      this.isShow = true
      this.$nextTick(()=>{
        this.initMap()
      })
    },
    closeMsg(){
      this.isShow = false
    },
    getDetail() {
      this.infoLoading = true
      getDetailApi({id:this.id}).then((res) => {
        this.info = res;
      }).finally(()=>{
        this.infoLoading = false
      })
    },
    initMap() {
      //定义地图中心点坐标
      var center = new window.TMap.LatLng(this.info.comRecruiters.enterprise.enterpriseLatitude, this.info.comRecruiters.enterprise.enterpriseLongitude)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById('contain'), {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
        pitch: 43.5,  //设置俯仰角
        rotation: 45    //设置地图旋转角度
      });
      var marker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
          // mark样式
          "marker": new TMap.MarkerStyle({
            "width": 25,
            "height": 38,
            "anchor": { x: 12, y: 32 },
          })
        },
        geometries: [{
          "id": 'demo1',
          "styleId": 'marker',
          "position": new TMap.LatLng(this.info.comRecruiters.enterprise.enterpriseLatitude, this.info.comRecruiters.enterprise.enterpriseLongitude),
          "properties": {
            "title": this.info.jobAddress,
            "address": this.info.jobAddress,
          }
        }]
      });
      //初始化infoWindow
      var infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(this.info.comRecruiters.enterprise.enterpriseLatitude, this.info.comRecruiters.enterprise.enterpriseLongitude),
        offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      });
      infoWindow.close();//初始关闭信息窗关闭
      //监听标注点击事件
      marker.on("click", function (evt) {
        console.log(evt)
        //设置infoWindow
        infoWindow.open(); //打开信息窗
        infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
        infoWindow.setContent(`<div style="white-space:
          nowrap;margin:10px;color:#000;text-align:left;">
          <p style="font-size:16px;">${evt.geometry.properties.title}</p>
           </div>`);//设置信息窗内容
      })
    },
    skip(){
      this.$router.push({name: 'company-details',query:{ sId:this.info.comRecruiters.enterprise.id, cId:this.info.comRecruiters.enterprise.id,id:this.info.enrollId}})
      // this.$router.push({name: 'company-details',query:{ sId:this.info.comRecruiters.enterprise.id, cId:this.info.comRecruiters.enterprise.id }})
      // comId:this.info.comRecruiters.enterprise.id,
    },

  },
  computed:{
    jobDescriptionLength:function (){
      return this.info.jobDescription.length
    },
    enterpriseIntroductionLength:function (){
      return this.info.comRecruiters.enterprise.enterpriseIntroduction.length
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/views/Recruitment/Recruitment") {
      to.meta.keepAlive = true;
    } else {
      to.meta.keepAlive = false;
    }
    next();
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getDetail()
   // this.initMap()
  },

}
</script>

<style lang="scss" scoped>
.detail-content{
  box-sizing: border-box;
  width: 800px;
  margin: 30px auto;
  border-radius: 20px;
  ::v-deep{
    .el-button{
      border: none;
    }
    .el-popover{
      border: none;
    }
  }
  .left-block{
    width: 800px;
    height: 100%;
    margin: 30px auto;
    box-sizing: border-box;
    display: flex;
    .left-top-block{
      width: 100%;
      height: 240px;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      background-color: #fff;
      margin-right: 30px;
      .post-top{
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .post-title{
          width: 200px;
          font-size: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .post-pay{
          font-size: 20px;
          color: #5493F3;
        }
      }
      .striping{
         margin-top: 20px;
         width: 100%;
         height: 2px;
        background: -webkit-linear-gradient(left, #fff -4%,#c7c7c7 50%,#fff 100%);
      }
      .site{
        font-size: 18px;
        margin-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .release-time{
        display: flex;
        margin-top: 20px;
        font-size: 18px;
      }
      .count{
        display: flex;
        color: #767676;
        font-size: 16px;
        margin-top: 20px;
        .send-count{
          display: flex;
        }
        .browse-count{
          display: flex;
          margin-left: 20px;
        }
        .counts{
          margin-left: 10px;
        }
      }

    }
    .left-middle-block{
      width: 100%;
      height: 240px;
      //height: 120px;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      background-color: #fff;
      .title{
        color: #498CF3;
        font-size: 26px;
        font-weight: 900;
      }
      .welfare-block{
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        .welfare-list{
          display: flex;
          flex-wrap: wrap;
          color: #2F7CFF;
          margin-bottom: 10px;
          .welfare{
            height: 33px;
            padding: 6px 16px;
            background-color: #C8DCFB;
            color: #2F7CFF;
            border-radius: 20px;
            text-align: center;
            margin-right: 15px;
          }
        }
      }


    }

  }
  .left-bottom-block{
    justify-content: space-between;
    align-items: center;
    width: 384px;
    height: 200px;
    padding: 20px 5px 20px 20px;
    box-sizing: border-box;
    border-radius: 15px;
    margin-top: 27px;
    background-color: #fff;
    ::v-deep{
      .el-button{
        margin-top: 10px;
      }
    }
    .people-content{
      display: flex;
      justify-content: space-between;
      margin: 30px 0;
    }
    .title{
      color: #498CF3;
      font-size: 26px;
      font-weight: 900;
    }
    .default-avatar{
      display: flex;
      align-items: center;
      height: 100%;
      font-size: 18px;
      img{
        width: 75px;
        height: 75px;
        border-radius: 60px;
      }
      .hr-info{
        margin-left: 20px;
      }
    }
    .map{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      width: 100px;
      height: 37px;
      line-height: 37px;
      color: #498CF3;
      border: 1px solid #498CF3;
      border-radius: 20px;
      box-shadow: 0px 4px 4px 0px #e5e5e5;
      font-size: 18px;
      span{
        margin-bottom: 10px;
      }
      img{
        margin: 8px 5px 0 0;
        width: 18px;
        height: 18px;
      }
    }
  }
  .middle-top-block{
    width: 100%;
    padding: 20px 20px;
    box-sizing: border-box;
    border-radius: 15px;
    background-color: #fff;
    .title{
      color: #498CF3;
      font-size: 26px;
      font-weight: 900;
    }
    .text{
      margin-top: 20px;
      font-size: 18px;
      line-height: 45px;
      text-indent: 2em;
      overflow-y: scroll;
    }
  }
  .middle-block{
    width: 800px;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    .middle-bottom-block{
      width: 400px;
      height: 200px;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      margin: 27px 0 30px 30px;
      background-color: #fff;
      .map1{
        position: relative;
        width: 100%;
        height: 35%;
        background-color: #fff;
        border-radius: 15px;
        padding: 10px;
        .img{
          width: 3%;
          height: 75%;
          margin-right: 20px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .title{
          text-align: left;
          margin: 10px;
          color: #498CF3;
          font-size: 26px;
          font-weight: 900;
        }
      }
      .title{
        color: #498CF3;
        font-size: 26px;
        font-weight: 900;
      }
      .location{
        box-sizing: border-box;
        margin-top: 10px;
        text-align: center;
        font-size: 18px;
        .site{
          text-align: left;
          line-height: 37px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          height: 77px;
        }
        .map{
          display: flex;
          justify-content: center;
          box-sizing: border-box;
          width: 130px;
          height: 40px;
          line-height: 37px;
          color: #498CF3;
          border: 1px solid #498CF3;
          border-radius: 20px;
          box-shadow: 0px 4px 4px 0px #e5e5e5;
          span{
            margin-bottom: 10px;
          }
          img{
            margin: 7px 0px 0 0;
            width: 25px;
            height: 25px;
          }
        }
      }
    }
  }
  .right-block{
    width: 800px;
    box-sizing: border-box;
    padding: 20px 20px;
    border-radius: 15px;
    margin-right: 15px;
    background-color: #fff;
    .title{
      color: #498CF3;
      font-size: 26px;
      font-weight: 900;
    }
    .company-info{
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 20px;
      font-size: 20px;
      img{
        width: 75px;
        height: 75px;
        margin-right: 20px;
      }
      .company-scale{
        box-sizing: border-box;
        line-height: 30px;
        margin-left: 20px;
        .scale{
          margin-top: 10px;
        }
      }
    }
    .brief-intro{
      line-height: 45px;
      margin-top: 20px;
      font-size: 18px;
      .small-title{
        color: #5E99F4;
        font-size: 18px;
      }
      .text{
        font-size: 18px;
        line-height: 40px;
        text-indent: 2em;
      }
    }
    .small-title{
      color: #5E99F4;
      margin-top: 20px;
      font-size: 18px;
    }
    .right-bottom-block{
      margin-top: 20px;
      font-size: 18px;
      display: flex;
      align-items: center;
      font-size: 18px;
      .property{
        margin-right: 20px;
        width: 400px;
      }
      .legal-person{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 20px;
        width: 400px;
      }
      .more{
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        width: 300px;
        height: 40px;
        line-height: 37px;
        color: #498CF3;
        border: 1px solid #498CF3;
        border-radius: 20px;
        box-shadow: 0px 4px 4px 0px #e5e5e5;
        margin-right: 20px;
      }
      .create-time{
        width: 445px;
      }
    }
  }
}
</style>
